<template>
	<view class="container" :style="{background:'url(' + paramsStore.bgImg + ')'}">
		<location ref="locationMode" @click="getLocation"></location>
		<temperature ref="temperatureMode"> </temperature>
		<futureWeather class="futureWeather" ref="futureMode"></futureWeather>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from "vue"
	import location from "@/components/location.vue"
	import temperature from "@/components/temperature.vue"
	import futureWeather from "@/components/futureWeather.vue"
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	//引入全局参数
	import {
		paramasUserStore
	} from "@/store/params.js"
	//引入仓库
	const paramsStore = paramasUserStore()
	//引入proxy
	const {
		proxy
	} = getCurrentInstance()
	let locationMode = ref() //挂载子组件
	let temperatureMode = ref() //挂载子组件
	let futureMode = ref() //挂载子组件
	onMounted(async () => {


	})

	onLoad((o) => {
		getLocation()
	})
	onPullDownRefresh(() => {
		console.log('下拉刷新');
		getLocation()
		uni.stopPullDownRefresh()
	})



	//获取当前经纬度
	function getLocation() {
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			altitude: true,
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				paramsStore.longitude = res.longitude
				paramsStore.latitude = res.latitude
				//调用逆编码获取位置详情及城市街道code
				locationMode.value.getAddr(paramsStore.latitude, paramsStore.longitude)
				setTimeout(() => {
					temperatureMode.value.getWeather()
					futureMode.value.getFutureWeather()
				}, 1000)
			},
			fail(res) {
				console.log('定位失败：', res);
				proxy.$msg('定位失败:' + res.errMsg + '请点击地址处重新获取位置信息', 5000, false)
			},
			complete(res) {
				console.log('定位回调', res);
			}
		});
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		min-height: 100vh;

	}

	.futureWeather {
		margin-top: 10%;
	}
</style>